ITEP-163854 - replace react virtuoso - p4 #230

camiloHimura · 2025-05-16T08:48:15Z

📝 Description

Add a new hook to scroll a dataset to a specific item index. This will centralize the functionality within MediaItemsList, reducing duplicated code

Dataset List/annotator:

Screen.Recording.2025-05-16.at.10.38.43.mov

Test Dataset List/preview:

Screen.Recording.2025-05-16.at.10.42.56.mov

If referencing an internal ticket (e.g. JIRA), include the ticket number instead:
https://jira.devtools.intel.com/browse/ITEP-32688
-->

✨ Type of Change

Select the type of change your PR introduces:

🐞 Bug fix – Non-breaking change which fixes an issue
🚀 New feature – Non-breaking change which adds functionality
🔨 Refactor – Non-breaking change which refactors the code base
💥 Breaking change – Changes that break existing functionality
📚 Documentation update
🔒 Security update
🧪 Tests

🧪 Testing Scenarios

Describe how the changes were tested and how reviewers can test them too:

✅ Tested manually
🤖 Run automated end-to-end tests

✅ Checklist

Before submitting the PR, ensure the following:

🔍 PR title is clear and descriptive
📝 For internal contributors: If applicable, include the JIRA ticket number (e.g., ITEP-123456) in the PR title. Do not include full URLs
💬 I have commented my code, especially in hard-to-understand areas
📄 I have made corresponding changes to the documentation
✅ I have added tests that prove my fix is effective or my feature works

Copilot

Pull Request Overview

This PR refactors scroll logic by introducing a new hook, useScrollToTargetItem, to centralize scrolling behavior in media item list components while also updating view mode settings for layout consistency.

Replace react virtuoso scrolling with a custom scroll hook
Update view mode settings (e.g., gap change for LARGE view mode)
Refactor media and dataset list components (and their tests) to use the new hook

Reviewed Changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
web_ui/src/shared/components/media-view-modes/utils.ts	Updated view mode settings mapping and layout parameters
web_ui/src/shared/components/media-items-list/use-scroll-to-target-item.hook.tsx	Introduced a new hook for scrolling to a target item index
web_ui/src/shared/components/media-items-list/use-scroll-to-target-item.hook.test.tsx	Added tests for the new scrolling hook
web_ui/src/shared/components/media-items-list/media-items-list.component.tsx	Integrated the new hook into the media items list component
web_ui/src/pages/project-details/components/project-test/test-media-items-list.component.tsx	Updated test components to use the new scrollToIndex prop
web_ui/src/pages/project-details/components/project-media/media-content-bucket.component.tsx	Applied updated view mode settings for anomaly projects
web_ui/src/pages/annotator/components/sidebar/dataset/dataset-list.component.tsx	Refactored scrolling logic to leverage the new hook
web_ui/src/pages/annotator/components/sidebar/dataset/dataset-list-item-details.component.tsx	Enhanced media name display with truncation for better layout

Comments suppressed due to low confidence (1)

web_ui/src/shared/components/media-view-modes/utils.ts:15

Ensure that the changes in VIEW_MODE_SETTINGS—specifically swapping the positions of LARGE and SMALL and changing the gap for LARGE from 12 to 8—are intentional and aligned with the design requirements.

[ViewModes.LARGE]: { minItemSize: 300, gap: 8, maxColumns: 4 },

web_ui/src/shared/components/media-items-list/media-items-list.component.tsx

web_ui/src/shared/components/media-items-list/use-scroll-to-target-item.hook.tsx

web_ui/src/shared/components/media-items-list/use-scroll-to-target-item.hook.test.tsx

web_ui/src/shared/components/media-view-modes/utils.ts

Copilot

Pull Request Overview

This PR refactors scrolling logic by extracting a reusable hook, removes legacy Virtuoso-based scroll code, and updates media list components to use the new hook.

Centralize scroll-to-index behavior into useScrollToTargetItem hook
Integrate hook into MediaItemsList and replace manual timeouts in higher-level components
Remove legacy Virtuoso imports/effects and introduce view mode settings override for anomaly projects

Reviewed Changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
shared/components/media-view-modes/utils.ts	Reordered view mode settings entries
shared/components/media-items-list/use-scroll-to-target-item.hook.tsx	Added `useScrollToTargetItem` hook with timeout-based scroll
shared/components/media-items-list/use-scroll-to-target-item.hook.test.tsx	Added unit tests for the new hook
shared/components/media-items-list/media-items-list.component.tsx	Integrated scroll hook, replaced manual scroll logic
pages/project-details/components/project-test/test-media-items-list.component.tsx	Removed legacy Virtuoso scroll effect, passed `scrollToIndex`
pages/project-details/components/project-media/media-content-bucket.component.tsx	Added anomaly-specific `viewModeSettings`, cleaned imports
pages/annotator/components/sidebar/dataset/dataset-list.component.tsx	Removed legacy scroll effect and related imports, added `scrollToIndex`
pages/annotator/components/sidebar/dataset/dataset-list-item-details.component.tsx	Updated `PressableElement` to use `isTruncated`

web_ui/src/shared/components/media-items-list/use-scroll-to-target-item.hook.tsx

web_ui/src/shared/components/media-items-list/media-items-list.component.tsx

Copilot · 2025-05-19T06:50:20Z

web_ui/src/pages/project-details/components/project-media/media-content-bucket.component.tsx

@@ -22,7 +22,7 @@ import {
 import { MediaDropBoxHeader } from '../../../../shared/components/media-drop/media-drop-box-header.component';
 import { MediaDropBox } from '../../../../shared/components/media-drop/media-drop-box.component';
 import { MediaItemsList } from '../../../../shared/components/media-items-list/media-items-list.component';
-import { INITIAL_VIEW_MODE } from '../../../../shared/components/media-view-modes/utils';
+import { INITIAL_VIEW_MODE, VIEW_MODE_SETTINGS, ViewModes } from '../../../../shared/components/media-view-modes/utils';


The INITIAL_VIEW_MODE import is unused and can be removed to clean up dead code.

Suggested change

import { INITIAL_VIEW_MODE, VIEW_MODE_SETTINGS, ViewModes } from '../../../../shared/components/media-view-modes/utils';

import { VIEW_MODE_SETTINGS, ViewModes } from '../../../../shared/components/media-view-modes/utils';

MarkRedeman · 2025-05-19T07:08:49Z

web_ui/src/shared/components/media-items-list/use-scroll-to-target-item.hook.tsx

+
+const isValidIndex = (index?: number): index is number => !isNil(index) && Number.isInteger(index) && index >= 0;
+
+export const useScrollToTargetItem = ({


I feel like this name is not really accurate: the hook it self does not scroll, the callback does. Do we have to pass this as a callback parameter?

No, I intentionally avoided passing the ref as an argument. This hook should focus solely on the calculations and leave the scrolling logic to the handler. Also, the current name isn't very accurate, so I'll update it

MarkRedeman · 2025-05-19T07:09:49Z

web_ui/src/shared/components/media-items-list/media-items-list.component.tsx

+        container,
+        targetIndex: scrollToIndex,
+        dependencies: [scrollToIndex, viewMode, container],
+        callback: (top) => ref.current?.scrollTo({ top, behavior: 'smooth' }),


I'd expect react aria to have a specific function to focus on a virtualized element, which then triggers the scrolling. Did you check if there's not a more explicit way to do this?

I couldn't find a specific helper or handler in either the react-aria utilities or the component itself

camiloHimura requested review from jpggvilaca, MarkRedeman, pplaskie, ActiveChooN, romanowska and dwesolow as code owners May 16, 2025 08:48

camiloHimura added UI ready for review labels May 16, 2025

camiloHimura requested a review from Copilot May 16, 2025 08:48

Copilot AI reviewed May 16, 2025

View reviewed changes

web_ui/src/shared/components/media-items-list/media-items-list.component.tsx Show resolved Hide resolved

jpggvilaca reviewed May 16, 2025

View reviewed changes

web_ui/src/shared/components/media-items-list/use-scroll-to-target-item.hook.tsx Outdated Show resolved Hide resolved

dwesolow reviewed May 16, 2025

View reviewed changes

web_ui/src/shared/components/media-items-list/use-scroll-to-target-item.hook.test.tsx Outdated Show resolved Hide resolved

dwesolow reviewed May 16, 2025

View reviewed changes

web_ui/src/shared/components/media-view-modes/utils.ts Outdated Show resolved Hide resolved

camiloHimura force-pushed the ccolora11/ITEP-163854-replace-react-virtuoso-p4 branch from 1e37f43 to f3bca5d Compare May 19, 2025 06:46

camiloHimura requested review from jpggvilaca, dwesolow and Copilot May 19, 2025 06:48

Copilot AI reviewed May 19, 2025

View reviewed changes

MarkRedeman reviewed May 19, 2025

View reviewed changes

camiloHimura added 3 commits May 19, 2025 11:12

add useScrollToTargetItem hook

a37f0d7

update test to use useFakeTimers and useRealTimers

57216cc

rename hook

53ec41b

camiloHimura force-pushed the ccolora11/ITEP-163854-replace-react-virtuoso-p4 branch from f3bca5d to 53ec41b Compare May 19, 2025 09:27

jpggvilaca approved these changes May 19, 2025

View reviewed changes

MarkRedeman approved these changes May 20, 2025

View reviewed changes

camiloHimura added this pull request to the merge queue May 20, 2025

Merged via the queue into main with commit b9ee286 May 20, 2025
23 checks passed

camiloHimura deleted the ccolora11/ITEP-163854-replace-react-virtuoso-p4 branch May 20, 2025 07:21

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

ITEP-163854 - replace react virtuoso - p4 #230

ITEP-163854 - replace react virtuoso - p4 #230

Uh oh!

camiloHimura commented May 16, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI May 19, 2025

Uh oh!

MarkRedeman May 19, 2025

Uh oh!

camiloHimura May 19, 2025

Uh oh!

MarkRedeman May 19, 2025

Uh oh!

camiloHimura May 19, 2025

Uh oh!

Uh oh!

Uh oh!

	import { INITIAL_VIEW_MODE, VIEW_MODE_SETTINGS, ViewModes } from '../../../../shared/components/media-view-modes/utils';
	import { VIEW_MODE_SETTINGS, ViewModes } from '../../../../shared/components/media-view-modes/utils';


		const isValidIndex = (index?: number): index is number => !isNil(index) && Number.isInteger(index) && index >= 0;

		export const useScrollToTargetItem = ({

ITEP-163854 - replace react virtuoso - p4 #230

ITEP-163854 - replace react virtuoso - p4 #230

Uh oh!

Conversation

camiloHimura commented May 16, 2025

📝 Description

✨ Type of Change

🧪 Testing Scenarios

✅ Checklist

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI May 19, 2025

Choose a reason for hiding this comment

Uh oh!

MarkRedeman May 19, 2025

Choose a reason for hiding this comment

Uh oh!

camiloHimura May 19, 2025

Choose a reason for hiding this comment

Uh oh!

MarkRedeman May 19, 2025

Choose a reason for hiding this comment

Uh oh!

camiloHimura May 19, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!